<template>
  <div class="box">
    <!-- <div class="login">
      <div>
        <span>用户名：</span>&nbsp;&nbsp;&nbsp;
        <input type="text" name="uname" id="uname" v-model="uname" />
      </div>
      <div>
        <span>密码：</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="password" name="upassword" id="upassword" v-model="upassword"/>
      </div>
      <button class="btn" @click="login">登录</button>
    </div> -->
    <div class="login">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="uname">
        <el-input type="text" v-model="ruleForm.uname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="upassword">
        <el-input type="password" v-model="ruleForm.upassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
 
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    var uname = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }else{
          callback()
        }
      };
      var upassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        // uname:'',
        // upassword:'',
        ruleForm: {
          uname: '',
          upassword: '',
        },
        rules: {
          uname: [
            { validator: uname, trigger: 'blur' }
          ],
          upassword: [
            { validator: upassword, trigger: 'blur' }
          ]
        }
    }
  },
  methods:{
    
    // async login(){
    //   try {
    //     // 这里将uname和password做为参数传给登录接口(封装一个api，专门管理接口
    //     const {uname,upassword}=this
    //     console.log('uname:'+uname+'---upassword:'+upassword);
    //     (uname&&upassword) && await this.$store.dispatch('login',{uname,upassword})
    //     if(this.token){
    //       this.$router.push('/sys')
    //     }
    //   } catch (error) {
    //     console.log(error.message);
    //   }
    // },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const {uname,upassword}=this.ruleForm
            // console.log('uname:'+uname+'---upassword:'+upassword);
            this.$store.dispatch('login',{uname,upassword})
            if(this.token){
              this.$router.push('/sys')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  },
  computed:{
    token(){
      return this.$store.state.login.token
    }
  }
};
</script>

<style lang='less' scoped>
  .box{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      
      background:url(../../assets/images/background.jpg);
      .login{
          background-color: rgb(223, 226, 245);
          width: 300px;
          height: 200px;
          margin: 150px auto;
          padding: 30px 30px 0px 0px;
          // padding: 10px;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-around;
          // text-align:center;
          // div {
          //   input{
          //     outline: none;
          //     text-decoration: none;
          //     border: none;
          //   }
          // }
          // .btn{
          //   cursor: pointer;
          //   width: 4rem;
          //   margin: 0 auto;
          // }
      }
  }
</style>